<template>
  <div class="app-h101">
    <el-form class="test_height_form" :inline="true" label-width="100px" style="margin: 6px 0 0 0">
      <!-- <el-form-item label="客户订单号">
        <el-input v-model="page.condition.customerOrderNo" placeholder="请输入内容" style="width: 184px"></el-input>
      </el-form-item> -->

      <el-form-item label="客户名称">
        <el-select v-model="page.condition.customerNo"  placeholder="请选择" style="width: 184px">
          <el-option
            v-for="item in customerNameSelect.options"
            :key="item.code"
            :label="item.sname"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="异常分类">
        <el-select v-model="page.condition.classCode" placeholder="异常分类" @change="selectclassCode"  style="width: 184px">
          <el-option
            v-for="(item,index) in classCodeSelect.options"
            :key="index"
            :label="item.text"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
     
      <el-row>
        <el-col :span="24" style="padding-left:10px;padding-bottom:10px;">
         <el-button type="primary" :disabled='searchdisabled' @click="search">查询</el-button>
         <el-button type="primary" @click="resetSearch">重置</el-button>
         <el-button type="primary" @click="exportClick" >导出</el-button>
         <a :href="getExeclUrl" v-show="false" ></a>
        </el-col>
      </el-row>
    </el-form>

    <div style="width: 100%;position: relative;">
      <v-loading v-show="tableloading"></v-loading>
      <el-table
        :data="dataServer"
        border element-loading-text="正在加载中..." v-loading="false"
        style="margin: 0 4px;" :height="table_height" v-if="tableFlag">
        <el-table-column v-for="(item,index) in tableContent"
          :prop="item.prop  "
          :label="item.label"
          :formatter="dateFormat"
          :key="index"
          :width="item.width">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <el-dialog title="异常在途跟踪编辑" :visible.sync="dialogVisible" width="70%" >
      <kas-edit :modify_info_data="modify_info_data"></kas-edit>
    </el-dialog>


  </div>
</template>

<script type="text/javascript">
import kasEdit from './layer/edit'
import Area from '^/data/area/index.js'
import * as orderAPI from '@/api/order'
import { formatDate } from '@/utils/date.js'
import { bus } from '@/utils/bus.js'
import Loading from '@/components/loading/loading.vue'
export default {
  name: 'unusualQuery',
  components: { kasEdit, 'v-loading': Loading },
  data() {
    return {
      name: '异常在途',
      dialogVisible: false,
      tableFlag: true,
      modify_info_data: '',
      table_height: 0,
      dataServer: [],
      page: {
        current: 1,
        size: 10,
        total: 1,
        condition: {
          customerNo: '',
          classCode: ''
        }
      },
      tableContent: [
          { prop: 'sysOrderNo', label: '中联订单号', width: '140', fixed: '' },
          { prop: 'customerOrderNo', label: '客户订单号', width: '200', fixed: '' },
          { prop: 'customerName', label: '客户名称', width: '140', fixed: '' },
          { prop: 'orderDate', label: '订单日期', width: '140', fixed: '' },
          { prop: 'vin', label: '车架号', width: '200', fixed: '' },
          { prop: 'styleCode', label: '车型代码', width: '200', fixed: '' },
          { prop: 'styleName', label: '车型名称', width: '360', fixed: '' },
          { prop: 'dealerName', label: '经销商名称', width: '240', fixed: '' },
          { prop: 'oProvince', label: '收车省', width: '60', fixed: '' },
          { prop: 'oCity', label: '发车市', width: '60', fixed: '' },
          { prop: 'oAddress', label: '发车地址', width: '300', fixed: '' },
          { prop: 'dProvince', label: '收车省', width: '60', fixed: '' },
          { prop: 'dCity', label: '收车市', width: '60', fixed: '' },
          { prop: 'dAddress', label: '收车地址', width: '300', fixed: '' },
          { prop: 'distance', label: '运输距离(km)', width: '100', fixed: '' },
          { prop: 'orderStatus', label: '订单状态', width: '120', fixed: '' },
          { prop: 'transportType', label: '运输方式', width: '140', fixed: '' },
          { prop: 'orderCreateTime', label: '接单时间', width: '140', fixed: '' },
          { prop: 'pickTime', label: '提车时间', width: '140', fixed: '' },
          { prop: 'printOrderTime', label: '打单时间', width: '140', fixed: '' },
          { prop: 'inboundTime', label: '入中联库时间', width: '140', fixed: '' },
          { prop: 'arrangeCapacityTime', label: '安排运力时间', width: '140', fixed: '' },
          { prop: 'outboundTime', label: '出中联库时间', width: '140', fixed: '' },
          { prop: 'enterRailwayTime', label: '入铁路库时间', width: '140', fixed: '' },
          { prop: 'loadTime', label: '装车时间', width: '140', fixed: '' },
          { prop: 'leaveTime', label: '离昌时间', width: '140', fixed: '' },
          { prop: 'supplier', label: '承运车队', width: '220', fixed: '' },
          { prop: 'driverPhone', label: '司机联系方式', width: '160', fixed: '' },
          { prop: 'licensePlate', label: '车牌号', width: '100', fixed: '' },
          { prop: 'planShiptoTime', label: '预计送达时间', width: '140', fixed: '' },
          { prop: 'shiptoTime', label: '送达时间', width: '140', fixed: '' },
          { prop: 'returnOrderTime', label: '回单时间', width: '140', fixed: '' },
          { prop: 'shipmentType', label: '发运类型', width: '100', fixed: '' },
          { prop: 'newestPosition', label: '最新在途位置', width: '360', fixed: '' },
          { prop: 'newestTime', label: '最新在途时间', width: '140', fixed: '' },
          { prop: 'recordCount', label: '在途记录数', width: '100', fixed: '' },
          { prop: 'remark', label: '备注', width: '200', fixed: '' },
          { prop: 'remarkDesc', label: '备注说明', width: '200', fixed: '' },
          { prop: 'way', label: '数据源', width: '140', fixed: '' }
      ],
      areaData: Area,
      getExeclUrl: '#',
      customerNameSelect: {
        selectValue: '',
        options: []
      },
      classCodeSelect: {
        selectValue: '',
        options: []
      },
      tableloading: false,
      searchdisabled: false
    }
  },
  created() {
    const that = this
    // that.getList()
    bus.$on('before-close', (text) => {
      // console.log('text', text)
      that.dialogVisible = text
      if (!text) {
        // console.log('编辑完成 点确定关闭后 重新请求 列表内数据')
        that.getList()
      }
    })
    that.getSelectInfo()
  },
  mounted() {
    const that = this
    const q_h = (document.getElementsByClassName('sidebar-container')[0]).offsetHeight
    const cha = q_h - 360 - 100
      // let cha = q_h - 250 - 245
      // if (q_h > 800) {
      //   cha = 390
      // } else {
      //   cha = q_h - 250 - 150
      // }
    that.table_height = cha
      // console.log('table', that.table_height, 'q_h', q_h)
  },
  methods: {
    getList(page) {
      const that = this
      that.tableloading = true
      orderAPI.exceptionLineQuery(page).then(res => {
        console.log('exceptionLineQuery', res)
        that.dataServer = res.data.records
        that.page.current = res.data.current
        that.page.size = res.data.size
        that.page.total = res.data.total
        that.tableFlag = false
        that.tableFlag = true

        that.tableloading = false
        that.searchdisabled = false
      }).catch(res => {
        console.warn('error', res)
        that.tableloading = false
        that.searchdisabled = false
      })
    },
    getSelectInfo() {
      const that = this
        // 获取查询项
      if (that.customerNameSelect.options.length === 0) {
          // 获取客户名称
        orderAPI.findCustomerName().then((res) => {
          if (res.code === 0) {
            that.customerNameSelect.options = res.data
          }
        }).catch((res) => {
          console.warn('error', res)
        })
      }
      if (that.classCodeSelect.options.length === 0) {
        // 异常分类
        orderAPI.findgetClass().then((res) => {
          if (res.code === 0) {
            console.log('classCodeSelect', res.data)
            that.classCodeSelect.options = res.data
          }
        }).catch((res) => {
          console.warn('error', res)
        })
      }
    },
    search() {
      const that = this
      const check_classCode = that.checkHasclassCode()
      if (check_classCode) {
        this.page.current = 1
        this.searchdisabled = true
        console.log('search-this.page', this.page.condition)
        this.getList(this.page)
      }
    },
    checkHasclassCode() {
      const that = this
      if (that.page.condition.classCode === '') {
        that.$notify({
          title: '信息提示',
          message: '请先选择异常分类',
          type: 'warning',
          duration: 2000
        })
        return
      }
      return true
    },
    resetSearch() {
      this.page.current = 1
      this.page.size = 10
      this.page.condition = {
        customerNo: '',
        classCode: ''
      }
    },
    selectclassCode() {
      console.log('选择了异常分类')
      // this.page.current = 1
      // this.searchdisabled = true
      // console.log('search-this.page', this.page.condition)
      // this.getList(this.page)
    },
    handleClick(data) {
      const that = this
      orderAPI.findModifyInfo(data.id).then(res => {
        that.modify_info_data = res.data
        console.log('modify_info_data', this.modify_info_data)
        this.dialogVisible = true
      }).catch(res => {
        console.warn('error', res)
      })
    },
    handleClose() {
      console.log('close')
      this.dialogVisible = false
    },
    exportClick() {
      const that = this
      const check_classCode = that.checkHasclassCode()
      if (check_classCode) {
        const BASE_API = process.env.BASE_API
        // const url = 'http://10.2.7.91/excel/getExcel'
        const params = this.page.condition
        console.log('BASE_API', BASE_API, 'params', params)
        this.formatUrl(BASE_API, params)
      }
    },
    formatUrl(url, params) {
      const that = this
      let wUrl = ''
      let cUrl = ''
      let itemStr = ''
      for (const i in params) {
        if (params[i] !== '') {
          itemStr = [i] + '=' + params[i]
          itemStr = itemStr + '&'
          wUrl += itemStr
        }
      }
        // 清除末尾 多余的 '&'
      const reg = /&$/gi
      cUrl = wUrl.replace(reg, '')
      // 异常导出
      that.getExeclUrl = url + '/excel/getExceptionExcel' + '?' + cUrl
      console.log('that.getExeclUrl', that.getExeclUrl, 'wUrl', wUrl, 'cUrl', cUrl)
      const myA = document.createElement('a')
      myA.href = that.getExeclUrl
      myA.click()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.page.current = 1
      this.getList(this.page)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getList(this.page)
      console.log(`当前页: ${val}`)
    },
    dateFormat(row, column) {
      const str = row[column.property]
      let newStr
      let pStr
      if (str !== undefined) {
        pStr = str * 1
        const r1 = /^\+?[1-9][0-9]*$/
        const r2 = /^\d{13}$/
        if (r1.test(pStr) && r2.test(pStr)) {
            // console.log('这是13位时间戳')
          const date = new Date(str)
            // newStr = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          newStr = formatDate(date, 'yyyy-MM-dd')
        } else {
          newStr = str
        }
      }
      // console.log('newStr', newStr)
      return newStr
    }
  }
}
</script>

<style rel="stylesheet/css" lang="css" scoped>
  .edit-add-position{
    padding: 2px 10px;
    margin-left: 6px;
  }
</style>
